@import "../../../both/mixin";

.person_list_cr.bln{
  width : 1200px;
  margin : 30px auto 0;

  .list_title{
    font-size : 20px;
    font-weight: 200;
    color : #000000;
    line-height : 20px;
    margin-bottom: 20px;
  }

  @include cf(".list_content_cr");
  .list_content_cr{

    a.list_cover_img{
      position: relative;
      float : left;
      text-decoration: none;
      display: block;

      img{
        height : #{172 * 2 + 10}px;
        width : 231px;
      }

      .list_intro{
        position: absolute;
        bottom: 40px;
        color : white;
        padding : 10px;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        width : 220px;
        font-size : 18px;
      }

    }

    @include cf("ul.course_lists");
    ul.course_lists{

      list-style: none;
      display: block;
      height : #{172 * 2 + 10}px;
      float: left;
      margin-left : 5px;
      width : #{1200 - 231 - 10}px;

      li{

        width : 224px;
        height : 172px;
        float : left;
        display: block;
        margin-left : 15px;
        margin-bottom: 10px;
        position: relative;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);

        a{
          text-decoration: none;
          display: block;
        }

        img{
          width : 224px;
          height : 172px;
        }

        .panel_content{
          color : #000000;
          position: absolute;
          bottom: 0;
          left : 0;
          right : 0;
          background-color: #FFFFFF;
          transition: all .3s;
          opacity: 0.97;

          .title{
            color : #07111b;
            line-height : 21px;
            font-size : 14px;
            padding : 16px 20px 6px;
          }

          .desc{
            color : #93999f;
            font-size : 12px;
            padding : 5px 20px;
            height : 36px;
            overflow: hidden;
          }
        }

        .panel_footer{
          position: absolute;
          bottom: 0;
          left : 0;
          right : 0;
          padding : 10px 20px;
          line-height: #{42 - 20}px;
          height : 42px;
          background-color: #FFFFFF;
          color : #96A2B1;
          font-size : 12px;

          .teacher{
            float : left;
          }

          .starNum{
            float: right;
          }
        }

        &:hover{
          box-shadow: 0 5px 20px rgba(0,0,0,0.3);

          .panel_content{
            bottom: 42px;
          }
        }

      }

    }

  }
}